<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.warp{width: 200px;height: 200px;border-radius: 50%;background-color: #e5e5e5;margin: 200px auto;position: relative;}
		.nb{width: 180px;height: 180px;border-radius: 50%;background-color: white;position: absolute;left: 50%;top: 50%;margin-left: -90px;margin-top: -90px;}
		#number{position: relative;width: 100%;height: 100%;}
		#number div{width: 180px; height: 22px; font-size: 20px; text-align: center; line-height: 22px;position: absolute;top: 50%;margin-top: -8px;}
		#number span{display: block; width: 22px; height: 22px; }
		#h{width: 10px;height: 50px;background-color: black;margin-left: -5px;top: 50%;margin-top: -50px;transform-origin: 50% bottom;}
		#m{width: 6px;height: 60px;background-color: red;margin-left: -3px;top: 50%;margin-top: -60px;transform-origin: 50% bottom;}
		#s{width: 2px;height: 70px;background-color: blue;margin-left: -1px;top: 50%;margin-top: -70px;transform-origin: 50% bottom;}
		.shot{position: absolute;left: 50%;}
	</style>
</head>
<body>
	<div class="warp">
		<div class="nb">
			<div id="number">
				<div><span>9</span></div>
				<div><span>10</span></div>
				<div><span>11</span></div>
				<div><span>12</span></div>
				<div><span>1</span></div>
				<div><span>2</span></div>
				<div><span>3</span></div>
				<div><span>4</span></div>
				<div><span>5</span></div>
				<div><span>6</span></div>
				<div><span>7</span></div>
				<div><span>8</span></div>
			</div>
			<div id="h" class="shot"></div>
			<div id="m" class="shot"></div>
			<div id="s" class="shot"></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var divs=document.getElementById("number").getElementsByTagName("div");
	var spans=document.getElementById("number").getElementsByTagName("span");
	var hour=document.getElementById("h");
	var min=document.getElementById("m");
	var sec=document.getElementById("s");

	// 数字
	for (var i = 0; i < divs.length; i++) {
		var rot=i*30;
		divs[i].style.transform="rotate( "+ rot +"deg )";
		spans[i].style.transform="rotate("+-rot+"deg)";
	}

	// 针
	function z(){
		var date=new Date();
		var h=date.getHours();
		var m=date.getMinutes();
		var s=date.getSeconds();
		var sz = 6 * m / 360 * 6;
		hour.style.transform="rotate("+(h*30+sz)+"deg)";
		var fz = 6 * s / 360 * 6;
		min.style.transform="rotate("+(m*6+fz)+"deg)";
		sec.style.transform="rotate("+s*6+"deg)";
	}
	z();
	var time=setInterval(z,1000);
</script>
</html>